<div ng-controller="Umbraco.PrevalueEditors.CropSizesController" class="umb-editor umb-prevalues-multivalues umb-cropsizes">

    <div class="control-group umb-cropsizes__add">

        <div class="umb-cropsizes__input-wrap">
            <label for="addcropalias"><localize key="general_alias">Alias</localize></label>
            <input
                id="addcropalias"
                name="newItem.alias"
                type="text"
                ng-model="newItem.alias"
                class="umb-cropsizes__input"
                val-highlight="{{hasError}}"
                localize="placeholder"
                placeholder="@general_alias"
                focus-when="{{setFocus}}"
                ng-change="change()"
            />
        </div>

        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow">
            <label for="addcropwidth"><localize key="general_width">Width</localize></label>
            <input
                name="newItem.width"
                type="number"
                localize="placeholder"
                placeholder="@general_width"
                ng-model="newItem.width"
                class="umb-cropsizes__input"
                val-highlight="{{hasError}}"
                id="addcropwidth"
                min="0"
                pattern="[0-9]*"
            />
        </div>

        <div class="umb-cropsizes__input-wrap umb-cropsizes__input-wrap--narrow">
            <label for="addcropheight"><localize key="general_height">Height</localize></label>
            <input
                name="newItem.height"
                type="number"
                localize="placeholder"
                placeholder="@general_height"
                ng-model="newItem.height"
                class="umb-cropsizes__input"
                val-highlight="{{hasError}}"
                id="addcropheight"
                min="0"
                pattern="[0-9]*"
            />
        </div>

        <div class="umb-cropsizes__controls">
            <button class="btn btn-info add" ng-hide="editMode" ng-click="add($event)"><localize key="general_add">Add</localize></button>
            <button class="btn btn-info add" ng-show="editMode" ng-click="add($event)"><localize key="general_update">Update</localize></button>
            <a href class="btn btn-link" ng-show="editMode" ng-click="cancel($event)"><localize key="general_cancel">Cancel</localize></a>
        </div>

    </div>

    <div ui-sortable="sortableOptions" class="umb-cropsizes__sortable" ng-model="model.value">
        <div class="control-group umb-prevalues-multivalues__listitem" ng-repeat="item in model.value">
            <i class="icon icon-navigation handle"></i>
            <div class="umb-prevalues-multivalues__left">
                <p><span>{{item.alias}}</span> <small>({{item.width}}px &times; {{item.height}}px)</small></p>
            </div>
            <div class="umb-prevalues-multivalues__right">
                <a href="#" prevent-default class="umb-node-preview__action umb-node-preview__action--red" ng-click="edit(item, $event)" class="umb-prevalues-multivalues__action">Edit</a>
                <a class="umb-node-preview__action umb-node-preview__action--red" ng-click="remove(item, $event)"><localize key="general_remove">Remove</localize></a>
            </div>
        </div>
    </div>

</div>
